<template>
	<div class="mine-order bs">
		<div class="mine-order-title">
			<text style="font-size: 30px">我的订单</text>
			<div class="mine-order-title-more" @click="toOrder('all')">
				<text class="mine-order-title-more_title">查看全部订单</text>
				<icon class="mine-order-arrow" content="ios-arrow-forward"></icon>
			</div>
		</div>
		<div class="mine-order-info" style="padding-top: 15px">
			<div class="mine-order-unpaid" @click="toUnpaid('showUnpaid')" data-index="unpaid">
				<text class=" mine-order-icon">&#xe63d;</text>
				<text class="mine-order-bottomIcon">待付款</text>
                <text class="mine-order-num totalColor" v-if="unpaid > 0">{{showUnpaid}}</text>
			</div>
			<div class="mine-order-unpaid" @click="toNotDelivered('notdelivere')">
				<text class=" mine-order-icon">&#xe602;</text>
				<text class="mine-order-bottomIcon">待发货</text>
                <text class="mine-order-num totalColor" v-if="unshipping > 0">{{showUnshipping}}</text>
			</div>
			<div class="mine-order-unpaid" @click="toBeReceived('delivered')">
				<text class=" mine-order-icon">&#xe604;</text>
				<text class="mine-order-bottomIcon">待收货</text>
                <text class="mine-order-num totalColor" v-if="shipped > 0">{{showShipped}}</text>
			</div>
			<div class="mine-order-unpaid" @click="toEvaluate('evaluate')">
				<text class=" mine-order-icon">&#xe621;</text>
				<text class="mine-order-bottomIcon">评价</text>
                <text class="mine-order-num totalColor" v-if="completed > 0">{{showCompleted}}</text>
			</div>
      <div class="mine-order-unpaid" @click="toOrderRefund('refund')">
        <text class=" mine-order-icon">&#xe636;</text>
        <text class="mine-order-bottomIcon">退款退货</text>
        <text class="mine-order-num totalColor" v-if="refunds > 0">{{showRefunds}}</text>
      </div>
      <div class="mine-order-unpaid" @click="toAddress">
        <text class=" mine-order-icon">&#xe67a;</text>
        <text class="mine-order-bottomIcon">收货地址</text>
      </div>
      <div class="mine-order-unpaid" @click="shoppingClick">
        <text class=" mine-order-icon">&#xe7a9;</text>
        <text class="mine-order-bottomIcon">购物车</text>
      </div>
      <div class="mine-order-unpaid" @click="messageClick('refund')">
        <text class=" mine-order-icon">&#xe660;</text>
        <text class="mine-order-bottomIcon">消息通知</text>
        <text class="mine-order-num totalColor" v-if="refunds > 0">{{showRefunds}}</text>
      </div>
    </div>
	</div>
</template>

<script>
	const eeui = app.requireModule('eeui');
	import {summary} from '@/api/order'
	export default {
		data() {
			return {
				shipped: 0,
				unshipping: 0,
				completed: 0,
				unpaid: 0,
				refunds: 0,
				showShipped: 0,
				showUnshipping: 0,
				showCompleted: 0,
				showUnpaid: 0,
				showRefunds: 0
			}
		},
        props:[
            'time'
        ],
        watch:{
            time(val, oldVal){//普通的watch监听
                var _this = this
                console.log(val)
                if (_this.getGlobalData().token != null){
                    this.getOrderCount()
                };
            },

        },
		mounted() {
		    var _this = this
            if (_this.getGlobalData().token != null){
                this.getOrderCount()
            };
			this.initIconFont()
		},
		methods: {
			//获取订单数量信息
			getOrderCount() {
				summary().then(
				    res => {
				        console.log(res)
                        if (res.type == 'success') {
                            this.shipped = res.data.shipped;
                            this.unshipping = res.data.unshipping;
                            this.completed = res.data.completed;
                            this.unpaid = res.data.unpaid;
                            this.refunds = res.data.refunds;
                            this.showShipped = res.data.shipped > 99 ? '...' : res.data.shipped;
                            this.showUnshipping = res.data.unshipping > 99 ? '...' : res.data.unshipping;
                            this.showCompleted = res.data.completed > 99 ? '...' : res.data.completed;
                            this.showUnpaid = res.data.unpaid > 99 ? '...' : res.data.unpaid;
                            this.showRefunds = res.data.refunds > 99 ? '...' : res.data.refunds;
                        }
				    }
				).catch(error => {
				    console.log(error)
				})
			},
			//跳转到所有的订单页面
			toOrder: function(e) {
			    var _this = this
                if (this.getGlobalData().token == null){
                    eeui.toast('请先登录')
                    return
                }
                eeui.openPage({
						pageName: 'myOrder',
						params: '0',
						url: 'root://pages/member/order/list.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {
                        if (result.status == 'stop')  {
                            _this.getOrderCount()
                        }
					}
				);
			},
			toOrderRefund: function() {
			    var _this = this
                if (this.getGlobalData().token == null){
                    eeui.toast('请先登录')
                    return
                }
                eeui.openPage({
						url: 'root://pages/member/refund/list.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {
                        if (result.status == 'stop')  {
                            _this.getOrderCount()
                        }
					}
				);
			},
			toUnpaid: function(e) {
			    var _this = this
                if (this.getGlobalData().token == null){
                    eeui.toast('请先登录')
                    return
                }
                eeui.openPage({
						pageName: 'myOrder',
						params: '1',
						url: 'root://pages/member/order/list.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {
                        if (result.status == 'stop')  {
                            _this.getOrderCount()
                        }
					}
				);

			},
			toNotDelivered: function(e) {
			    var _this = this
                if (this.getGlobalData().token == null){
                    eeui.toast('请先登录')
                    return
                }
                eeui.openPage({
						pageName: 'myOrder',
						params: '2',
						url: 'root://pages/member/order/list.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {
                        if (result.status == 'stop')  {
                            _this.getOrderCount()
                        }
					}
				);
			},
			toBeReceived: function(e) {
			    var _this = this
                if (this.getGlobalData().token == null){
                    eeui.toast('请先登录')
                    return
                }
                eeui.openPage({
						pageName: 'myOrder',
						params: '3',
						url: 'root://pages/member/order/list.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {
                        if (result.status == 'stop')  {
                            _this.getOrderCount()
                        }
					}
				);
			},
			toEvaluate: function(e) {
			    var _this = this
                if (this.getGlobalData().token == null){
                    eeui.toast('请先登录')
                    return
                }
                eeui.openPage({
						pageName: 'myOrder',
						params: '4',
						url: 'root://pages/member/order/list.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {
                        if (result.status == 'stop')  {
                            _this.getOrderCount()
                        }
					}
				);
			},
      //收货地址
      toAddress: function (e) {
        if (this.getGlobalData().token == null) {
          eeui.toast('请先登录')
          return;
        }
        eeui.openPage({
          url: 'root://pages/member/address/address.js',
          statusBarType: 'immersion',
          statusBarStyle: false
        }, result => {
        });
      },
      shoppingClick(){
        eeui.openPage({
              url: 'root://pages/tabBar/shoppingCart',
              statusBarType: 'immersion',
              statusBarStyle: false
            }, (result) => {}
        );
      },
      messageClick() {
        if (this.getGlobalData().token == null) {
          eeui.toast('请先登录')
          return;
        }
        eeui.openPage({
          url: 'root://pages/member/message/index.js',
          statusBarType: 'immersion',
          statusBarStyle: false
        }, result => {
        });
      },


    }
	}
</script>
<style scoped>
	.mine-order {
		margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 30px;
		margin-right: 30px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16px;
	}

	.mine-order-title {
		font-size: 30px;
		position: relative;
		height: 80px;
		line-height: 80px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: rgba(231, 233, 237, 1);
		padding-left: 40px;
		padding-right: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.mine-order-title-more {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.mine-order-title-more_title {
		font-size: 25px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.5;
	}

	.mine-order-arrow {
		font-family: iconfont2;
		width: 25px;
		height: 30px;
		font-size: 30px;
		color: #888888;
		margin-bottom: 2px;
	}

	.mine-order-title-more text {
		display: block;
	}

	.mine-order-info {
    display: flex;
    align-items: center;
    font-size: 25px;
    flex-direction: row;
    font-weight: 400;
    /*padding: 20px 0;*/
    /*height: 150px;*/
    /*height: 300px;*/
    flex-wrap: wrap;
    height: 280px;
	}

	.mine-order-icon {
		font-family: iconfont2;
		width: 60px;
		height: 60px;
		font-size: 60px;
		color: #DFBB85;
  }

	.mine-order-num {
        position: absolute;
        right: 33px;
        top: 20px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        color: #fff;
	}

	.mine-order-unpaid {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        /*flex: 1;*/
        /*height: 150px;*/
        height: 130px;
        width: 170px;
	}

	.mine-order-notdelivere {
		position: relative;
		text-align: center;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
        height: 200px;
	}

	.mine-order-delivered {
		position: relative;
		text-align: center;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mine-order-evaluate {
		position: relative;
		text-align: center;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mine-order-refund {
		position: relative;
		text-align: center;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mine-order-bottomIcon {
		/*font-size: 24px;*/
    font-size: 26px;
    margin-top: 10px;
	}
    /* 小圆点 */
    .totalColor{
        background-color: #fc5157
    }
</style>
